<template>
    <div>
        <div class="top">
            <div class="top-title">
                <div class="blocks"></div>
                <span>验收详情</span>
                <div class="budget">
                    <span>预算金额：￥</span>
                    <span>19101.00</span>
                </div>
                <div class="implement">
                    <span>执行金额：￥</span>
                    <span>19101.00</span>
                </div>
            </div>
            <div class="top-xhx"></div>
        </div>
        <div class="smltit">
            <div class="smltit-title">
                <div class="blocks"></div>
                <span>基本信息</span>
                <i class="el-icon-arrow-down" style="font-size: 24px;margin: 0 auto;cursor: pointer;"></i>
            </div>
            <div class="smltit-xhx"></div>
            <div class="basic">

                <span style="justify-self: end;margin-right: 10px;">验收单据编号</span>
                <el-input placeholder="请输入内容" v-model="input" size="small" :disabled="true">
                </el-input>

                <span style="justify-self: end;margin-right: 10px;">单据状态</span>
                <el-input placeholder="请输入内容" v-model="input" size="small" :disabled="true">
                </el-input>

                <span style="justify-self: end;margin-right: 10px;">验收组织</span>
                <el-select v-model="value" placeholder="请选择" size="small">
                    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                </el-select>

                <span style="justify-self: end;margin-right: 10px;">验收部门</span>
                <el-select v-model="value" placeholder="请选择" size="small">
                    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                </el-select>

                <span style="justify-self: end;margin-right: 10px;">验收员</span>
                <el-input placeholder="请输入内容" v-model="input" size="small" :disabled="true">
                </el-input>
            </div>
            <div class="basic">
                <span style="justify-self: end;margin-right: 10px;">资产类型</span>
                <el-input placeholder="请输入内容" v-model="input" size="small" :disabled="true">
                </el-input>
             
                <span style="justify-self: end;margin-right: 10px;">验收类型</span>
                <el-select v-model="value" placeholder="请选择" size="small">
                    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                </el-select>

                <span style="justify-self: end;margin-right: 10px;">是否全新</span>
                <el-input placeholder="请输入内容" v-model="input" size="small" :disabled="true">
                </el-input>

                <span style="justify-self: end;margin-right: 10px;">验收日期</span>
                <el-input placeholder="请输入内容" v-model="input" size="small" :disabled="true">
                </el-input>

                <span style="justify-self: end;margin-right: 10px;">备注</span>
                <el-input placeholder="请输入内容" v-model="input" size="small">
                </el-input>
            </div>
        </div>
        <div class="detailed">
            <div class="detailed-title">
                <div class="blocks"></div>
                <span>采购明细</span>
                <span style="color: #cccaca;">(一个单据只能一类资产，行政类或生产类，不可同时申请两类资产)</span>
                <el-button type="primary" style="width: 60px;margin: 0 auto;">添加</el-button>
                <el-button style="width: 60px;margin: 0 auto;">移除</el-button>
            </div>
            <div class="detailed-xhx"></div>
            <el-table :data="tableData" border style="width: 100%;">
                <el-table-column type="selection" width="40" show-overflow-tooltip>
                </el-table-column>
                <el-table-column prop="date" label="单据来源编号" width="80" align="center" show-overflow-tooltip>
                </el-table-column>
                <el-table-column prop="name" label="实物卡片编码" width="120" align="center" show-overflow-tooltip>
                </el-table-column>
                <el-table-column prop="province" label="资产类别" width="120" align="center" show-overflow-tooltip>
                </el-table-column>
                <el-table-column prop="city" label="资产名称" width="120" align="center" show-overflow-tooltip>
                </el-table-column>
                <el-table-column prop="address" label="规格" width="120" align="center" show-overflow-tooltip>
                </el-table-column>
                <el-table-column prop="zip" label="单位" width="120" align="center" show-overflow-tooltip>
                </el-table-column>
                <el-table-column prop="zip" label="待验数量" width="120" align="center" show-overflow-tooltip>
                </el-table-column>
                <el-table-column prop="zip" label="验收数量" width="120" align="center" show-overflow-tooltip>
                </el-table-column>
                <el-table-column prop="zip" label="车牌号/自编号" width="120" align="center" show-overflow-tooltip>
                </el-table-column>
                <el-table-column prop="zip" label="供应商" width="120" align="center" show-overflow-tooltip>
                </el-table-column>
                <el-table-column prop="zip" label="存放地址" width="120" align="center" show-overflow-tooltip>
                </el-table-column>
                <el-table-column prop="zip" label="检查验收" width="120" align="center" show-overflow-tooltip>
                </el-table-column>
                <el-table-column prop="zip" label="完善登记" width="120" align="center" show-overflow-tooltip>
                </el-table-column>

                <el-table-column fixed="right" label="检查验收信息" width="100" align="center" show-overflow-tooltip>
                    <template slot-scope="scope">
                        <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
                        <el-button type="text" size="small">编辑</el-button>
                    </template>
                </el-table-column>

                <el-table-column fixed="right" label="完善登记信息" width="100" align="center" show-overflow-tooltip>
                    <template slot-scope="scope">
                        <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
                        <el-button type="text" size="small">编辑</el-button>
                    </template>
                </el-table-column>

                <el-table-column fixed="right" label="操作" width="100" align="center" show-overflow-tooltip>
                    <template slot-scope="scope">
                        <el-button @click="handleClick(scope.row)" type="text" size="small">复制</el-button>
                        <el-button type="text" size="small">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="upload">
            <div class="upload-title">
                <div class="blocks"></div>
                <span>上传附件</span>
                <span style="color: #cccaca;">(一个单据只能一类资产，行政类或生产类，不可同时申请两类资产)</span>
            </div>
            <div class="upload-xhx"></div>
            <div class="upload-button">
                <i class="el-icon-upload2" style="justify-self: end;"></i>
                <span>上传文件</span>
                <i class="el-icon-download" style="justify-self: end;"></i>
                <span>全部下载</span>
            </div>
            <div class="upload-data">
                <span>王宏的设备配置申请.xlsx</span>
                <span>下载</span>
                <span>删除</span>
                <span>预览</span>
            </div>
            <div class="upload-an">
                <el-button type="primary">提交</el-button>
                <el-button type="primary" plain>暂存</el-button>
                <el-button>关闭</el-button>
                <el-button>删除</el-button>
            </div>
            <div class="basic">
                <span style="justify-self: end;margin-right: 10px;">创始人</span>
                <el-input placeholder="请输入内容" v-model="input" size="small" :disabled="true">
                </el-input>
                <span style="justify-self: end;margin-right: 10px;">创建日期</span>
                <el-input suffix-icon="el-icon-date" placeholder="请输入内容" v-model="input" size="small" :disabled="true">
                </el-input>
                <span style="justify-self: end;margin-right: 10px;">修改人</span>
                <el-input placeholder="请输入内容" v-model="input" size="small" :disabled="true">
                </el-input>
                <span style="justify-self: end;margin-right: 10px;">修改日期</span>
                <el-input suffix-icon="el-icon-date" placeholder="请输入内容" v-model="input" size="small" :disabled="true">
                </el-input>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    methods: {

    },

    data() {
        return {
            options: [{
                value: '选项1',
                label: '黄金糕'
            }, {
                value: '选项2',
                label: '双皮奶'
            }, {
                value: '选项3',
                label: '蚵仔煎'
            }, {
                value: '选项4',
                label: '龙须面'
            }, {
                value: '选项5',
                label: '北京烤鸭'
            }],
            value: '',
            input: '',
            tableData: [{
                date: '2016-05-02',
                name: '王小虎',
                province: '上海',
                city: '普陀区',
                address: '上海市普陀区金沙江路 1518 弄',
                zip: 200333,

            }, {
                date: '2016-05-04',
                name: '王小虎',
                province: '上海',
                city: '普陀区',
                address: '上海市普陀区金沙江路 1517 弄',
                zip: 200333
            }, {
                date: '2016-05-01',
                name: '王小虎',
                province: '上海',
                city: '普陀区',
                address: '上海市普陀区金沙江路 1519 弄',
                zip: 200333
            }, {
                date: '2016-05-03',
                name: '王小虎',
                province: '上海',
                city: '普陀区',
                address: '上海市普陀区金沙江路 1516 弄',
                zip: 200333
            }],
            inputValue: '',
            options: [{
                value: '选项1',
                label: '黄金糕'
            }, {
                value: '选项2',
                label: '双皮奶'
            }, {
                value: '选项3',
                label: '蚵仔煎'
            }, {
                value: '选项4',
                label: '龙须面'
            }, {
                value: '选项5',
                label: '北京烤鸭'
            }]
        }
    }
}
</script>
<style lang="scss" scoped>
.top {
    width: 100%;

    .top-title {
        width: 100%;
        height: 40px;
        display: grid;
        grid-template-columns: 20px 1290px 170px 170px;
        align-items: center;

        .blocks {
            background-color: #165dff;
            height: 14px;
            width: 4px;
            border-radius: 0px 3px 3px 0px;
        }

        span {
            color: #181818;
            font-size: 14px;
            font-weight: bold;
        }

        .budget {
            background-color: #ececec;
            width: 150px;
            height: 30px;
            text-align: center;
            line-height: 28px;
        }

        .implement {
            background-color: #ececec;
            width: 150px;
            height: 30px;
            text-align: center;
            line-height: 28px;
        }
    }

    .top-xhx {
        width: 100%;
        height: 1px;
        background-color: #169bd5;
    }
}

.smltit {
    width: 98%;
    margin: 0 auto;
    height: 180px;
    .smltit-title {
        width: 100%;
        height: 40px;
        display: grid;
        grid-template-columns: 20px 1500px 100px;
        align-items: center;

        .blocks {
            background-color: rgb(58, 233, 58);
            height: 14px;
            width: 4px;
            border-radius: 0px 3px 3px 0px;
        }

        span {
            color: #181818;
            font-size: 14px;
            font-weight: bold;
        }

        .budget {
            background-color: #ececec;
            width: 150px;
            height: 30px;
            text-align: center;
            line-height: 28px;
        }

        .implement {
            background-color: #ececec;
            width: 150px;
            height: 30px;
            text-align: center;
            line-height: 28px;
        }
    }

    .smltit-xhx {
        width: 100%;
        height: 1px;
        background-color: #dfdfdf;
    }

    .basic {
        width: 100%;
        height: 50px;
        display: grid;
        grid-template-columns: 100px 230px 100px 230px 100px 230px 100px 230px 100px 230px;
        align-items: center;
        span {
            font-size: 13px;
        }
    }
}
.detailed{
    width: 98%;
    margin: 0 auto;
    height: 380px;
    .detailed-title{
        width: 100%;
        height: 40px;
        display: grid;
        grid-template-columns: 20px 100px 1300px 100px 100px;
        align-items: center;

        .blocks {
            background-color: rgb(58, 233, 58);
            height: 14px;
            width: 4px;
            border-radius: 0px 3px 3px 0px;
        }

        span {
            color: #181818;
            font-size: 14px;
            font-weight: bold;
        }

        .budget {
            background-color: #ececec;
            width: 150px;
            height: 30px;
            text-align: center;
            line-height: 28px;
        }

        .implement {
            background-color: #ececec;
            width: 150px;
            height: 30px;
            text-align: center;
            line-height: 28px;
        }
    }
    .detailed-xhx {
        width: 100%;
        height: 1px;
        background-color: #dfdfdf;
    }
}

.upload{
    width: 98%;
    margin: 0 auto;
    .upload-title{
        width: 100%;
        height: 40px;
        display: grid;
        grid-template-columns: 20px 100px 1300px 100px 100px;
        align-items: center;

        .blocks {
            background-color: rgb(58, 233, 58);
            height: 14px;
            width: 4px;
            border-radius: 0px 3px 3px 0px;
        }

        span {
            color: #181818;
            font-size: 14px;
            font-weight: bold;
        }
        .budget {
            background-color: #ececec;
            width: 150px;
            height: 30px;
            text-align: center;
            line-height: 28px;
        }
        .implement {
            background-color: #ececec;
            width: 150px;
            height: 30px;
            text-align: center;
            line-height: 28px;
        }
    }
    .upload-button{
        width: 300px;
        height: 50px;
        display: grid;
        grid-template-columns: 30px 100px 50px 100px;
        align-items: center;
        span{
            font-size: 14px;
            margin-left: 5px;
            cursor: pointer;
        }
    }
    .upload-data{
        width: 500px;
        height: 50px;
        display: grid;
        grid-template-columns: 200px 50px 50px 50px;
        align-items: center;
        span{
            font-size: 14px;
            margin-left: 5px;
        }
        span:not(:first-child) {
            color: #165dff;
            cursor: pointer;
        }
    }
    .upload-an{
        width: 500px;
        height: 50px;
        align-items: center;
    }
    .basic {
        width: 100%;
        height: 50px;
        display: grid;
        grid-template-columns: 60px 230px 80px 230px 80px 230px 80px 230px;
        align-items: center;
        span {
            font-size: 13px;
        }
    }
    .upload-xhx {
        width: 100%;
        height: 1px;
        background-color: #dfdfdf;
    }
}

.el-input {
    width: 200px;
}

.el-select {
    width: 200px;
}
</style>